<!DOCTYPE html>
<html>

<head>
	<title>我的QQ空间</title>
	<link rel="stylesheet" href="./static/css/bootstrap.min.css">
	<!-- <link rel="stylesheet" href="./static/css/home.css"> -->
	<link rel="stylesheet" href="./static/css/index.css">
	<link rel="stylesheet" href="./css/QQZone.css">
	<link rel="stylesheet" href="./css/home.css">
	<!-- <style>
		.btn-1:hover {
			border-radius: 1rem;
		}
	</style> -->
	<style>
		/* 吐槽按鈕 */
		.btn-1{
			margin-left: 30rem;
		}
		 /* 点赞样式 */
		 .give{
            position: absolute;
            left: 27rem;
			bottom: 1.8rem;
        }
	</style>

</head>

<body>


	<!--  -->
	<div class="bottom">
		<div class="bottom_info">
			<div class="user_bottom">
				<div class="name">
					<span>我们一起的空间</span>
				</div>
			</div>

			<div class="fabulous">
				<i style=" background-position: -451px 0;"></i>
				<span class="num">1</span>
			</div>

			<div class="userImg">
				<img style="width:120px;height:120px;border-radius: 2px;margin:4px;" src="images/墨镜滑稽.png" alt="您的头像">
			</div>

			<div class="userImg_right">
				<div class="userImg_right_top">
					<span style="margin-left:0;">还有童心的成年人</span>
				</div>
				<!-- <div class="userImg_right_down">
					<div class="userImg_right_down_1">
						<img width=40 height=40 src="images/受虐滑稽.png" />
					</div>
				</div> -->

				<!-- 按钮组件 -->
				<div class="col-sm-5 d-flex justify-content-end ">
					<button type="button" class="btn btn-secondary btn-sm shadow" data-toggle="modal"
						data-target="#closeAccount">注销</button>
				</div>
			</div>

			<div class="info_menu">
				<div class="menu_1" style="margin-left:150px;">
					主页
				</div>
				<div class="menu_1">
					日志
				</div>
				<div class="menu_1">
					相册
				</div>
				<div class="menu_1" style="width:72px;">
					留言板
				</div>
				<div class="menu_1">
					<a href="https://user.qzone.qq.com/">说说</a>
				</div>
				<div class="menu_1" style="width:72px;">
					个人档
				</div>
				<div class="menu_1">
					音乐
				</div>
				<div class="menu_1">
					更多
				</div>
			</div>
		</div>


		<!-- 注销  -->
		<div class="modal fade" id="closeAccount" data-backdrop="static" data-keyboard="false" tabindex="-1"
			style="font-family: cursive; margin-top: -8rem;" aria-labelledby="closeAccountLabel" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<div class="modal-header">
						<h3 class="modal-title" id="closeAccountLabel">注销</h3>
						<!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button> -->
					</div>
					<div class="modal-body center">
						<div class="form-group"
							style="height: 1rem; margin-top: 0.5rem; text-align: center; color:crimson;">
							<label for="exampleFormControlTextarea1">
								<h4>是否注销当前账户!</h4>
							</label>
						</div>
					</div>
					<!-- 按钮组件 -->
					<div class="modal-footer">
						<button type="button" class="btn btn-danger" style="width: 6rem;"
							onclick="logout()">确认注销</button>
						<button type="button" class="btn btn-success" style="width: 6rem;"
							data-dismiss="modal">再想想</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 吐槽一下 -->
		<div class="modal fade" id="comment" tabindex="-1" style="font-family: cursive;" aria-labelledby="exampleModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLabel">吐槽一下</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<div class="modal-body">
						<form>
							<div class="form-group">
								<!-- -- <input type="text" class="form-control" aria-describedby="passwordHelpInline" id="commentMsg"> -- -->
								<label for="exampleFormControlTextarea1">吐槽点儿什么吧...</label>
								<textarea class="form-control" id="commentMsg" rows="3"></textarea>
							</div>
						</form>
					</div>
					<!-- -- 按钮组件 -- -->
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary" style="width: 4rem;" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-success" style="width: 4rem;" data-dismiss="modal" onclick="comment()">吐槽</button>
					</div>
				</div>
			</div>
		</div>










		<!-- 发表说说 -->
		<div id="message">
			<!-- <p>有什么新鲜事想告诉大家?</p> -->
			<p>说点儿新鲜事儿吧</p>

			<!-- 吐槽按鈕 -->
			<div class="col-sm-2">
				<button type="button" style="width: 5rem;" class="btn btn-success btn-sm"
					data-toggle="modal" data-target="#comment"
					onclick="sayComment('{{msg.id}}')">吐槽一下</button>
			</div>


			<div class="edit" contenteditable="true"></div>
			<!--编辑区域-->
			<div class="but">
				<img src="images/受虐滑稽.png" style="width: 30px; height: 30px;" class="imgface" />
				<span class="msg_but">发表</span>
				<!-- <button></button> -->
				<div class="face" style=" z-index: 1;">
					<ul>
						<!-- <li><img src="images/bba_0001.png" title="[织]"></li> -->
						<li><img src="images/COS 滑稽.png" alt="" style="width: 30px; height: 30px;"></li>
						<li><img src="images/qq狗头.png" alt="" style="width: 30px; height: 30px;"></li>
						<li><img src="images/傲娇.png" alt="" style="width: 30px; height: 30px;"></li>
						<li><img src="images/受虐滑稽.png" alt="" style="width: 30px; height: 30px;"></li>
						<li><img src="images/墨镜滑稽.png" alt="" style="width: 30px; height: 30px;"></li>
						<li><img src="images/斗鸡眼-滑稽.png" alt="" style="width: 30px; height: 30px;"></li>
						<li><img src="images/EMOJI-01.png" alt="" style="width: 30px; height: 30px;"></li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<div class="msgBox">
	</div>

	<script src="./js/jquery-3.5.1.min.js"></script>
	<script src="./static/js/bootstrap.min.js"></script>

	<!-- 发表说说 -->
	<script type="text/javascript">
		//展开表情
		$(".imgface").click(function (e) {
			$(".face").slideDown();   //向下展开
			e.stopPropagation();   //阻止冒泡
		});
		$(document).click(function () {
			$(".face").slideUp();  //向上收缩
		});
		//点击表情
		$(".face ul li").click(function () {
			var _img = $(this).find("img").clone();  //当前   img  find()   查找 找到
			$(".edit").append(_img);  //追加 
		});
		$(".msg_but").click(function () {
			var _txt = $(".edit").html();  //获取当前编辑区域的内容（包括标签）
			if (_txt == "") {
				$(".edit").focus();  //获取焦点
			}
			else {
				$(".msgBox").append(`<div class='msgInfo'>
						<dl>
							<dt>
								<img src='images/lisa3 (3).jpg' width='46' height='46'/>
							</dt>
							<dd>
								IT潇潇
							</dd>
						</dl>
						<div class='con'>
							`+ _txt + `
						</div>
						<hr>
						<img src="images/赞.png" class="give" type="button" id="praise" style = "width: 28px; height: 21px value="赞(0)">
						<img src="images/对话框.png" type="button" class="btn-1 btn-sm" data-toggle="modal" data-target="#saysomething" style = "width: 50px; height: 43px"/>
					</div>`);
				$(".edit").html("");
			}
		});
	</script>

	
	
	<!-- 点赞 -->
    <script type="text/javascript">
        function zan() {
            var number = 0;
            return function () {
                this.value = "赞(" + (++number) + ")";
            }
        }
        var zz = zan();
        document.getElementById('praise').onclick = zz;
    </script>

</body>

</html>